<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >

	<f:view contentType="text/html" encoding="utf8">
		<h:head>
			<title>userController say </title>
			<style>
				.users {
				   border: thin solid black;
				 }
				
				 .usersHeader {
				   text-align: center;
				   font-style: italic;
				   color: Snow;
				   background: Teal;
				 }
				
				 .evenColumn {
				   height: 25px;
				   text-align: center;
				   background: MediumTurquoise;
				 }
				
				 .oddColumn {
				   text-align: center;
				   background: PowderBlue;
				 }
				
			</style>
			
			<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
			
		</h:head>
		
		<h:body onload="focusName()">
		
			<h:form prependId="false">
				<table>
					<tr>
						<td style="color:red;">
							用户名
						</td>
						<td>
							<h:inputText value="#{userController.name}" required="true" id="nameid"/>
						</td>
					</tr>
					<tr>
						<td>
						
							<h:commandButton action="#{userController.addUser}" value="提交" 
							id="clickBtn"
							 >
							 	<f:ajax execute="@form" render="@form" onerror="actionError" onevent="showProgress"></f:ajax>
							 </h:commandButton>
							
							<h:outputText id="clickBtn_message"/>
						</td>
					</tr>
				</table>
		
	
	
				<h:dataTable value="#{userController.allUser}" var="varUser" id="userTable"
				        styleClass="users"
				        headerClass="usersHeader"
				        rowClasses="evenColumn,oddColumn">
				        
			        <h:column>
				        <f:facet name="header">
				            <h:outputText value="id"/>
				        </f:facet>            	
				        <h:outputText value="#{varUser.userId}"/>
				        <f:facet name="footer">
				            <h:outputText value="****"/>
				        </f:facet>
			   		 </h:column>
	    
	    
				    <h:column>
				        <f:facet name="header">
				            <h:outputText value="Name"/>
				        </f:facet>
				        <h:outputText value="#{varUser.userName}"/>
				        <f:facet name="footer">
				            <h:outputText value="****"/>
				        </f:facet>
				    </h:column>
	    
	    
	    			 <h:column>
				        <f:facet name="header">
				            <h:outputText value="action"/>
				        </f:facet>
					       <h:commandLink value="delete" action="#{userController.deleteUser(varUser)}" >
					       	<f:ajax execute="@this" render="@form"></f:ajax>
					       </h:commandLink>
				        <f:facet name="footer">
				            <h:outputText value="****"/>
				        </f:facet>
				    </h:column>
	    
	 			</h:dataTable>
  


	</h:form>
	
	
	<script type="text/javascript">

		/*
			onerror函数，是在server端没有捕获exception，然后执行的client端函数
		*/
		function actionError(error){

			 alert(error.description);
		}

		/*
			onevent,函数，data有begin，complete，success三个参数
			begin:是刚提交到server端
			complete：是client端刚刚接收到server端的respon，在render之前
			success：是成功之后，在render之后
		*/
		 function showProgress(data) {
	            
	            var inputElement = data.source; // The HTML DOM input element.
	            var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
	            var messageForInputElement = document.getElementById(inputElement.id + "_message");

	            switch (ajaxStatus) {
	                case "begin": // This is called right before ajax request is been sent.
	                    messageForInputElement.innerHTML = "提交中...";
	                    break;

	                case "complete": // This is called right after ajax response is received.
	                    messageForInputElement.innerHTML = "";
	                    //alert("complete");
	                    break;

	                case "success": // This is called when ajax response is successfully processed.
	                    if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
	                        messageForInputElement.innerHTML = "提交完毕";
	                        focusName();
	                    }
	                    break;
	            }
	        }

			/*
				聚集到到名字输入框
			*/
	        function focusName(){
	        	 document.getElementById("nameid").focus();
		     }
	</script>
		</h:body>
	</f:view>
	
	
	
	
	
</html>